<template>
  <div>
    <p>
      <el-button type="primary" @click="addr">商品入库</el-button>
    </p>
    <el-table :data="inventory" style="width: 100%">
      <el-table-column prop="id" label="仓储编号"> </el-table-column>
      <el-table-column prop="productName" label="商品"> </el-table-column>
      <el-table-column label="入库总数">
        <template slot-scope="scope">
          {{ scope.row.quantityListed+scope.row.quantityInStock}}
        </template>
      </el-table-column>
      <el-table-column prop="quantityInStock" label="库存中数量">
      </el-table-column>
      <el-table-column prop="supplierName" label="供应商"> </el-table-column>
      <el-table-column prop="stockInTime" label="入库时间"> </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popover
            placement="right"
            width="250"
            trigger="click"
            @hide="reset(scope)"
          >
            <p>设置上架数量</p>
            <div>
              <template>
                <div class="block">
                  <el-slider
                    v-model="scope.row.slider"
                    :max="scope.row.quantityInStock"
                    show-input
                  >
                  </el-slider>
                </div>
              </template>
              <el-button type="success" @click="grounding(scope.row)"
                >确认</el-button
              >
            </div>
            <el-button slot="reference" type="success">上架</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="商品信息" :visible.sync="dialogFormVisible" width="450px">
      <el-form :model="form" ref="form">
        <el-form-item label="条形码" ref="barcode" style="width: 160px">
          <el-input
            v-model="form.barcode"
            autocomplete="off"
            clearable
            @keydown.enter.native="nextFocus(0)"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品名"
          prop="productName"
          size="small"
          style="width: 160px"
        >
          <el-input
            v-model="form.productName"
            :disabled="true"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.supplierId" placeholder="选择供应商">
            <el-option
              v-for="sup in supplier"
              :value="sup.id"
              :key="sup.id"
              :label="sup.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入库数量" size="small" style="width: 160px">
          <el-input
            v-model="form.quantityInStock"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json
import http from "../utils/request";

//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      slider: [],
      supplier: [],
      form: {
        supplierId: "",
        productName: "",
        productId: "",
        barcode: "",
        quantityInStock: 0,
      },
      dialogFormVisible: false,
      inventory: [],
      page: 1,
      limit: 10,
      key: "",
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    grounding(data) {
      if (data == 0 || data.slider == 0) {
        this.$message.error("未知错误");
        return;
      }
      if (data.quantityInStock - data.slider < 0) {
        this.$message.error("数量不足");
      }
      http
        .put(`/inventory/grounding?id=${data.id}&num=${data.slider}`)
        .then(({ data }) => {
          if (data.code == 1) {
            this.$message({
              type: "success",
              message: "上架成功",
            });
            this.getList();
          }
        });
    },
    reset(data) {
      console.info("重置", data);
      // this.slider = 0;
      data.row.slider=0

    },
    submit() {
      http.post(`/inventory/save`, this.form).then(({ data }) => {
        if (data.code == 1) {
          this.$message({
            type: "success",
            message: "入库成功",
          });
          this.dialogFormVisible = false;
          this.form = {
            supplierId: "",
            productName: "",
            productId: "",
            barcode: "",
            quantityInStock: 0,
          };
          this.getList();
        }
      });
    },
    getProduct() {
      if (this.form.barcode.length < 13) {
        this.$message.error("条码数据错误");
        return 0;
      }
      console.log("获取商品信息", this.barcode);
      http.get(`product/getbybarcode/${this.form.barcode}`).then(({ data }) => {
        if (data.code == 1) {
          console.log("获取到商品信息", data);
          this.productId = data.data.productId;
          console.log("输入商品id", this.productId);
          this.form.productId = data.data.productId;
          this.form.productName = data.data.name;
          this.createOrder();
        } else {
          this.$message.error("未能获取商品信息");
          return 0;
        }
      });
    },
    nextFocus(index) {
      var status = this.getProduct();
      if (status != 0) {
        this.$refs["form"].$el[index + 2].focus();
      } else {
        this.form.barcode = "";
      }
    },
    addr() {
      this.dialogFormVisible = true;
    },
    getSupList() {
      http.get(`/supplier/list/all`).then(({ data }) => {
        console.info("接收到传入数据", data.data);
        this.supplier = data.data;
        console.info("接收到解析数据", this.supplier);
      });
    },
    getList() {
      http
        .get(
          `/inventory/list?page=${this.page}&limit=${this.limit}&key=${this.key}`
        )
        .then(({ data }) => {
          this.inventory = data.data.records;
          this.inventory.forEach(function (item) {
            item.slider ;
          });
          console.info("接收到解析数据", this.inventory);
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getList();
    this.getSupList();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共 css 类
</style>
